<template>
	<view class="">
		<view class="nav-back">
			<top-heigth></top-heigth>
			<uv-navbar :fixed="false" bg-color="rgba(0,0,0,0)" :title="backTitle" :safeAreaInsetTop="false">
				<template v-slot:left>
					<view class="uv-nav-slot" @click="goback()">
						<image src="/static/image/go.png" style="width: 40rpx; height: 40rpx;" mode="" class="image-top"></image>
					</view>
				</template>
			</uv-navbar>
		</view>
		<view class="header">
			<image :src="userInfo.staffCover" class="userheadImg" mode="aspectFill"></image>
			<view>
				<view class="header-name">{{ userInfo.staffName }}—{{ userInfo.staffMobile }}</view>
				<view  class="header-text">请对本次服务做出真实评价！</view>
			</view>  
		</view>
			<view class="content-box">
				<uv-form labelPosition="top" :model="model1" :rules="rules" ref="form" labelWidth="100%">
					<uv-form-item label="性别" prop="formInfo.sex" borderBottom>
						<uv-radio-group v-model="model1.formInfo.sex">
							<uv-radio
								:customStyle="{margin: '8px'}" 
								v-for="(item, index) in sexList" 
								:key="index" 
								:label="item.label" 
								:name="item.name">
							</uv-radio>
						</uv-radio-group>
					</uv-form-item>
					<uv-form-item label="年龄" prop="formInfo.age" borderBottom>
						<uv-radio-group v-model="model1.formInfo.age">
							<uv-radio
								:customStyle="{margin: '8px'}" 
								v-for="(item, index) in ageList" 
								:key="index" 
								:label="item.label" 
								:name="item.name">
							</uv-radio>
						</uv-radio-group>
					</uv-form-item>
					<uv-form-item label="是否有用过其他平台上门按摩服务？" prop="formInfo.other" borderBottom>
						<view>
						<uv-radio-group v-model="model1.formInfo.other">
							<uv-radio
								:customStyle="{margin: '8px'}" 
								v-for="(item, index) in noOrYesList" 
								:key="index" 
								:label="item.label" 
								:name="item.name">
							</uv-radio>
						</uv-radio-group>
						<uv-input v-model="model1.formInfo.otherName" v-if="model1.formInfo.other == 1"></uv-input>
						</view>
					</uv-form-item>
					<uv-form-item label="是否为新客户？" prop="formInfo.isNew" borderBottom>
						<uv-radio-group v-model="model1.formInfo.isNew">
							<uv-radio
								:customStyle="{margin: '8px'}" 
								v-for="(item, index) in customList" 
								:key="index" 
								:label="item.label" 
								:name="item.name">
							</uv-radio>
						</uv-radio-group>
					</uv-form-item>
					<uv-form-item label="客户是如何了解到同城赴约平台的？" prop="formInfo.channel" borderBottom>
						<view>
						<uv-radio-group v-model="model1.formInfo.channel">
							<uv-radio
								:customStyle="{margin: '8px'}" 
								v-for="(item, index) in channelList" 
								:key="index" 
								:label="item.label" 
								:name="item.name">
							</uv-radio>
						</uv-radio-group>
						<uv-input v-model="model1.formInfo.channelName" v-if="model1.formInfo.channel == 4" style="width: 50%;"></uv-input>
						</view>
						</uv-form-item>
					<uv-form-item label="客户有最喜欢的推拿项目吗？" prop="formInfo.service" borderBottom>
						<uv-radio-group v-model="model1.formInfo.service">
							<uv-radio
								:customStyle="{margin: '8px'}" 
								v-for="(item, index) in servicelList" 
								:key="index" 
								:label="item.label" 
								:name="item.name">
							</uv-radio>
						</uv-radio-group>
					</uv-form-item>
					<uv-form-item label="受力大小" prop="formInfo.power" borderBottom>
						<uv-radio-group v-model="model1.formInfo.power">
							<uv-radio
								:customStyle="{margin: '8px'}" 
								v-for="(item, index) in powerList" 
								:key="index" 
								:label="item.label" 
								:name="item.name">
							</uv-radio>
						</uv-radio-group>
					</uv-form-item>
					<uv-form-item label="服务地址类型" prop="formInfo.address" borderBottom>
						<uv-radio-group v-model="model1.formInfo.address">
							<uv-radio
								:customStyle="{margin: '8px'}" 
								v-for="(item, index) in addresslList" 
								:key="index" 
								:label="item.label" 
								:name="item.name">
							</uv-radio>
						</uv-radio-group>
					</uv-form-item>
					<uv-form-item label="客户劳累部位(可多选)" prop="formInfo.body" borderBottom>
						<uv-checkbox-group v-model="model1.formInfo.body">
							<uv-checkbox 
								:customStyle="{margin: '8px'}" 
								v-for="(item, index) in bodyList" 
								:key="index" :label="item.label" 
								:name="item.name"
							></uv-checkbox>
						</uv-checkbox-group>
					</uv-form-item>
					<uv-form-item label="客户行为举止(可多选)" prop="formInfo.behavior" borderBottom>
						<uv-checkbox-group v-model="model1.formInfo.behavior">
							<uv-checkbox 
								:customStyle="{margin: '8px'}" 
								v-for="(item, index) in behaviorList" 
								:key="index" :label="item.label" 
								:name="item.name"
							></uv-checkbox>
						</uv-checkbox-group>
					</uv-form-item>
					<uv-form-item label="客户是否使用物料包" prop="formInfo.material" borderBottom>
						<uv-radio-group v-model="model1.formInfo.material">
							<uv-radio
								:customStyle="{margin: '8px'}" 
								v-for="(item, index) in yesOrNoList" 
								:key="index" 
								:label="item.label" 
								:name="item.name">
							</uv-radio>
						</uv-radio-group>
					</uv-form-item>
					<uv-form-item label="客户是否使用精油" prop="formInfo.oil" borderBottom>
						<uv-radio-group v-model="model1.formInfo.oil">
							<uv-radio
								:customStyle="{margin: '8px'}" 
								v-for="(item, index) in yesOrNoList" 
								:key="index" 
								:label="item.label" 
								:name="item.name">
							</uv-radio>
						</uv-radio-group>
					</uv-form-item>
					<uv-form-item label="用户情况描述" prop="formInfo.questionDesc" borderBottom>
						<uv-textarea v-model="model1.formInfo.questionDesc" placeholder="请输入内容"></uv-textarea>
					</uv-form-item>
				</uv-form>
				<view>
					<view @click="submitFn()" class="login-but2">
					提交
					</view>
				</view>
				
			</view>
			
	</view>
</template>

<script>
	import TopHeigth from '@/components/TopHeigth.vue'

	export default {
		data() {
			return {
				backTitle:"技师评价",
				userInfo: uni.getStorageSync('userInfo'),
				orderId: 0,
				sexList: [{
					name: '1',
					label: '男',
				}, {
					name: '2',
					label: '女',
				}],
				ageList: [{
					name: '1',
					label: '20-30岁',
				}, {
					name: '2',
					label: '30-40岁',
				}, {
					name: '3',
					label: '40-50岁',
				}, {
					name: '4',
					label: '50岁以上',
				}],
				yesOrNoList: [{
					name: '1',
					label: '是',
				}, {
					name: '0',
					label: '否',
				}],
				noOrYesList: [{
					name: '0',
					label: '否',
				}, {
					name: '1',
					label: '是(请填写)',
				}],
				customList: [{
					name: '1',
					label: '新客户',
				}, {
					name: '0',
					label: '老客户',
				}],
				channelList: [{
					name: '1',
					label: '抖音等短视频平台',
				}, {
					name: '2',
					label: '电梯广告',
				}, {
					name: '3',
					label: '朋友推荐',
				}, {
					name: '4',
					label: '其他(可填写)',
				}],
				servicelList: [{
					name: '0',
					label: '无',
				}, {
					name: '1',
					label: '古韵推拿',
				}, {
					name: '2',
					label: '古韵舒筋SPA',
				}, {
					name: '3',
					label: '泰式唤醒SPA',
				}, {
					name: '4',
					label: '欧式奢华SPA',
				}, {
					name: '5',
					label: '悦享足道',
				}, {
					name: '6',
					label: '古韵采耳',
				}],
				powerList: [{
					name: '3',
					label: '大',
				}, {
					name: '2',
					label: '适中',
				}, {
					name: '1',
					label: '小',
				}],
				addresslList: [{
					name: '1',
					label: '星级酒店',
				}, {
					name: '2',
					label: '连锁酒店',
				}, {
					name: '3',
					label: '住宅',
				}, {
					name: '4',
					label: '公司',
				}],
				bodyList: [{
					name: '1',
					label: '头部',
				}, {
					name: '2',
					label: '颈部',
				}, {
					name: '3',
					label: '肩部',
				}, {
					name: '4',
					label: '臀部',
				}, {
					name: '5',
					label: '腹部',
				}, {
					name: '6',
					label: '腿部',
				}, {
					name: '7',
					label: '腰部',
				}],
				behaviorList: [{
					name: '1',
					label: '有礼貌',
				}, {
					name: '2',
					label: '态度好',
				}, {
					name: '3',
					label: '热情',
				}, {
					name: '4',
					label: '小动作',
				}, {
					name: '5',
					label: '动粗',
				}, {
					name: '6',
					label: '无理要求',
				}, {
					name: '7',
					label: '孕妇',
				}, {
					name: '8',
					label: '患病',
				}, {
					name: '9',
					label: '同行',
				}],
				model1: {
					formInfo: {
						"sex": '',
						"age": '',
						"other": '',
						"otherName":"",
						"isNew": '',
						"channel": '',
						"channelName":"",
						"service": '',
						"power": '',
						"address": '',
						"body": [],
						"behavior": [],
						"material": '',
						"oil": '',
						"questionDesc":""
					}
				},
				rules: {},
			}
		},
		components: { TopHeigth },
		onLoad(e) {
			this.orderId = e.orderId;
			this.rules = {};
			Object.keys(this.model1.formInfo).map(key => {
				let obj = {};
				if(key == 'body' || key == 'behavior'){
					obj = {
						type: 'array',
						min: 1,
						required: true,
						message: '请选择！',
						trigger: ['change']
					}
				}else if(key == 'questionDesc'){
					obj = {
						type: 'string',
						required: true,
						message: '请填写！',
						trigger: ['blur', 'change']
					}
				}else{
					obj = {
						type: 'string',
						required: true,
						message: '请选择！',
						trigger: ['change']
					}
				}
				this.rules[`formInfo.${key}`] = obj;
			})
		},
		methods: {			
			submitFn(){
				this.$refs.form.validate().then(res => {
					var params = {
						orderId: this.orderId,
					}
					//字符串转为数组
					Object.keys(this.model1.formInfo).map(key => {
						let itemValue = this.model1.formInfo[key];
						if(key != 'body' && key != 'behavior' && key != 'otherName' && key != 'channelName' && key != 'questionDesc'){
							itemValue = Number(itemValue);
						}
						params[key] = itemValue;
					})
					params.body = params.body.join(',');
					params.behavior = params.behavior.join(',');
					uni.$u.http.post('/api/shop/v1_0/tAppOrderQuestionRCA/insertGetIdTAppOrderQuestion',params).then((res) => {
						
						// 此处提交完成回到订单页面
						uni.switchTab({
							url: "/pages/order/order?num="+4
						})
						
					})
				}).catch(errors => {
					
				})
			},
			goback(){
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.content-box{
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 20rpx;
		padding-bottom: 20rpx;
	}
	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
	}
	
	.mine-back{
		background: url("/static/image/back2.png") no-repeat;
		background-size: 100% auto;
		
	}
	
	.mine-font{
		background: #fff;
		border-radius: 16rpx;
		//box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.05);
		font-size: 28rpx;
		color: #02091A;
		margin-top: 24rpx;
		padding: 0 24rpx;
		.list{
			@include flex;
			align-items: center;
			justify-content:space-between;
			padding:28rpx 0;
			border-bottom: 2rpx solid #eee;
			
			.list-l{
				@include flex;
				align-items: center;
				justify-content:flex-start;
				min-width:130rpx;
				font-size: 30rpx;
				font-weight: bold
			}
			.list-r{
				@include flex;
				align-items: center;
				justify-content:flex-start;
				width: calc(100% - 164rpx);
				font-size: 42rpx;
				.list-r-font{
					width: calc(100% - 32rpx);
					color: #333;
					font-size: 24rpx;
					margin-right: 16rpx;
				}
			}
			
		}
		.list:last-child{
			border-bottom:none;
		}
	}
	.header{
	    width: 100%;
	    height: 350rpx;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	}
	.header .userheadImg{
	    width: 160rpx;
	    height: 160rpx;
	    border-radius: 80rpx;
	    margin-top: 48rpx;
	    margin-bottom: 24rpx;
	    
	}
	.header .header-name{
		font-weight: 600;
		font-size: 32rpx;
		color: #333333;
		line-height: 44rpx;
	}
	.header .header-text{
		font-weight: 400;
		font-size: 26rpx;
		color: #666666;
		line-height: 36rpx;
		padding-top: 8rpx;
	}
</style>
